<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="front/front_layout">
<head>
    <title>每日流水</title>

    <style type="text/css">
        a{ text-decoration:none; }
        ul{ list-style: none;margin: 0;padding: 0; }
        .st_main_frame{
            width: 100%;
            min-height: 800px;
            background-color: #f2f2f2;
        }
        .st_main{
            margin:0 15px 0 10px;
            color: #555;
        }

        .st_zb{
             width: 50%;
             float: left;
         }

        .st_zb_content{
            margin-right: 5px;
        }

        .st_phb{
            width: 50%;
            float: left;
        }
        .st_zb_title{
            height: 50px;
            overflow: hidden;
        }

        .st_zt_text{
            height: 22px;
            border-left:4px #FF4748 solid;
            padding-left: 12px;
            font-weight: 600;
            line-height:22px;
            margin-top: 14px;
        }

        .st_zb_ul li{
            float:left;
            width: 50%;
            overflow: hidden;
        }

        .st_zb_li_content{
            margin-right: 10px;
            height: 120px;
            overflow: hidden;
        }

        .st_zb_li_number{
            text-align: center;
            font-weight: 600;
            font-size: 18px;
            color: #FFF;
            height: 40px;
            line-height: 40px;
            margin-top: 25px;
        }

        .st_zb_li_unit{
            text-align: center;
            color: #fff;
        }

        .st_phb_content{
            margin-left:15px;
        }

        .st_phb_frame{
            height: 248px;
            border:1px solid #a5a9b0;
            overflow-y: auto;
            background-color: #fff;
        }

        .st_phb_frame table{
            width: 100%;
            font-size: 14px;
            text-align: center;
            background-color: #fff;
        }

        .st_phb_frame table tr{
            height: 50px;
        }

        .st_phb_frame table tr:nth-child(2n){
            background-color: #F3F3F1;
        }



        .st_list{
            margin-top: 5px;
        }
        .st_list_table table{
            width: 100%;
            font-size: 14px;
            text-align: center;
            border:1px solid #a5a9b0;
            background-color: #fff;
        }

        .st_list_table table tr{
            height: 50px;
        }

        .st_list_table table tr:nth-child(2n+1){
            background-color: #F3F3F1;
        }

        .st_list_table table tr:first-child{
         background-color: #A6A6AA;
            color: #fff;
        }

        .st_pull{
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #fff;
            display: inline-block;
            margin-left: 5px;
        }

        .st_pull_td{
            position: relative;
        }
        .pull_list{
            position: absolute;
            width: 80px;
            left:50%;
            top: 40px;
            background-color: #f2f2f2;
            color:#555;
            overflow: hidden;
            display: none;
        }

        .pull_list ul li{
            width: 100%;
            padding:0 10px;
            height: 25px;
            line-height: 25px;
            text-align: left;
        }
    </style>
</head>
<body>
<!--<section layout:fragment="top_menu" style="text-align: right;padding-right: 20px">
</section>-->

<section layout:fragment="content">
    <div class="st_main_frame">
    <div class="st_main">
        <div style="overflow: hidden;">
<div class="st_zb">
    <div class="st_zb_content">
    <div class="st_zb_title"><div class="st_zt_text">今日关键指标</div></div>
    <ul class="st_zb_ul">
        <li><div class="st_zb_li_content" style="background-color: #FFBF32;"><div class="st_zb_li_number" id="peopleTotalId">0</div><div class="st_zb_li_unit">就餐人数(人)</div></div></li>
        <li><div class="st_zb_li_content" style="background-color: #9F70C7;"><div class="st_zb_li_number" id="menuTotalId">0</div><div class="st_zb_li_unit">菜品总量(份)</div></div></li>
        <li><div class="st_zb_li_content" style="background-color: #00BDF1;margin-top:10px;"><div class="st_zb_li_number" id="avgPriceId">0</div><div class="st_zb_li_unit">人均消费(人)</div></div></li>
        <li><div class="st_zb_li_content" style="background-color: #00BD97;margin-top:10px;"><div class="st_zb_li_number" id="priceTotalId">0</div><div class="st_zb_li_unit">消费总额(元)</div></div></li>
    </ul>
    </div>
</div>

    <div class="st_phb">
        <script type="text/html" id="top_list_template">
            {{each menuTopList as value i}}
            <tr><td>{{i+1}}</td><td>{{value.menuName}}</td><td>{{value.price}}</td><td>{{value.menuTotal}}份</td></tr>
            {{/each}}
        </script>

        <div class="st_phb_content">
        <div class="st_zb_title"><div class="st_zt_text">今日TOP10最受欢迎菜品排行榜</div></div>
            <div class="st_phb_frame">
                <table border="0" cellspacing="0" cellpadding="0" id="top_table_id">
                    <!--<tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                    <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>-->

                </table>
            </div>
        </div>
    </div>
        </div>

        <div class="st_list">
            <script type="text/html" id="order_list_template">
                {{each orderList as value i}}
                <tr><td>{{i+1}}</td><td>{{value.parentId}}</td><td>{{value.createDate}}</td><td>{{value.froms}}</td><td>{{value.people}}</td><td>{{value.menuTotal}}</td><td>{{value.state}}</td><td>{{value.originalPriceTotal}}</td><td>{{value.diffPiiceTotal}}</td><td>{{value.priceTotal}}</td></tr>
                {{/each}}
            </script>
            <script type="text/html" id="order_list_none_template">
                <tr><td>序号</td><td>订单编号</td><td>下单时间</td><td class="st_pull_td">订单来源<span class="st_pull"></span><div class="pull_list"><ul id="froms_id"><li data-id="0,1">全部</li><li data-id="0">微信端</li><li data-id="1">服务员端</li></ul></div></td><td>就餐人数</td><td>菜品数量</td><td class="st_pull_td">付款方式<span class="st_pull"></span><div class="pull_list"><ul id="state_id"><li data-id="1,5">全部</li><li data-id="1">微信支付</li><li data-id="5">线下支付</li></ul></div></td><td>订单金额</td><td>优惠金额</td><td>实付金额</td></tr>
            </script>
            <div class="st_zb_title"><div class="st_zt_text">今日已完成订单</div></div>
            <div class="st_list_table">
                <table cellspacing="0" cellpadding="0" id="order_table_id">
                    <!--<tr><td>序号</td><td>订单编号</td><td>下单时间</td><td class="st_pull_td">订单来源<span class="st_pull"></span><div class="pull_list"><ul id="froms_id"><li data-id="0,1">全部</li><li data-id="0">微信端</li><li data-id="1">服务员端</li></ul></div></td><td>就餐人数</td><td>菜品数量</td><td class="st_pull_td">付款方式<span class="st_pull"></span><div class="pull_list"><ul id="state_id"><li data-id="1,5">全部</li><li data-id="1">微信支付</li><li data-id="5">线下支付</li></ul></div></td><td>订单金额</td><td>优惠金额</td><td>实付金额</td></tr>-->
                    <!--<tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>-->

                </table>
            </div>
        </div>

        </div>
    </div>
</section>

<section layout:fragment="extra_scripts">

    <script type="text/javascript" src="/js/template.js"></script>
    <script th:inline="javascript">
        (function(){
            'use strict';
            console.log('statistics.html');
            var froms="0,1";
            var state="1,5";


            loadData();
            function loadClick(){
                $(".st_pull_td").off("click");
                $(".st_pull_td").on("click",function(){
                    $(".pull_list").hide();
                    var thisObj=$(this).children(".pull_list");
                    if(thisObj.is(":hidden")){
                        $(".pull_list").hide();
                        thisObj.show();
                    }else{
                        thisObj.hide();
                    }
                });

                $("#froms_id li").off("click");
                $("#froms_id li").on("click",function(e){
                    $(".pull_list").hide();
                    var sid=$(this).data("id");
                    froms=sid;
                    loadData();
                    e.stopPropagation();
                });

                $("#state_id li").off("click");
                $("#state_id li").on("click",function(e){
                    $(".pull_list").hide();
                    var sid=$(this).data("id");
                    state=sid;
                    loadData();
                    e.stopPropagation();
                });
            }

            function loadData(){
                $.ajax({
                    type:"GET",
                    url:"/front/get_order_statistics_data?froms="+froms+"&state="+state+"&rank="+Math.random(),
                    dataType:"json",
                    timeout: 10000,
                    success: function(data){
                        var orderHtml = template('order_list_none_template', null);
                        if(data){
                            if(data.zbMap){
                                if(data.zbMap.peopleTotal==null){
                                    data.zbMap.peopleTotal=0;
                                }
                                if(data.zbMap.menuTotal==null){
                                    data.zbMap.menuTotal=0;
                                }

                                if(data.zbMap.avgPrice==null){
                                    data.zbMap.avgPrice=0;
                                }

                                if(data.zbMap.priceTotal==null){
                                    data.zbMap.priceTotal=0;
                                }
                                $("#peopleTotalId").html(data.zbMap.peopleTotal);
                                $("#menuTotalId").html(data.zbMap.menuTotal);
                                $("#avgPriceId").html(data.zbMap.avgPrice);
                                $("#priceTotalId").html(data.zbMap.priceTotal);
                            }

                            if(data.menuTopList){
                                var menuHtml = template('top_list_template', data);
                                $("#top_table_id").html(menuHtml);
                            }

                            if(data.orderList){
                                var orderContentHtml = template('order_list_template', data);
                                orderHtml=orderHtml+orderContentHtml;
                            }
                        }
                        $("#order_table_id").html(orderHtml);
                        loadClick();
                    },
                    error:function(e){

                    }
                });
            }
        }());
    </script>
</section>

</body>

</html>